<template>
	<div v-if="item[childKey]">
		<template v-if="item[childKey].length === 0">
			<el-menu-item :index="item[indexKey]">
				<i :class="item.icon"></i>
				<span slot="title">
					{{ item[labelKey] }}
				</span>
			</el-menu-item>
		</template>
		<el-submenu v-else popper-class="popper" :index="item[indexKey]">
			<template slot="title">
				<i :class="item.icon"></i>
				<span>{{ item[labelKey] }}</span>
			</template>
			<template v-for="(child,index) in item[childKey]">
				<SideBarItem v-if="child[childKey] && child[childKey].length > 0" :item="child" :key="index"></SideBarItem>
				<el-menu-item v-else :key="index" :index="child[indexKey]">
					<i :class="child.icon"></i>
					<span slot="title">{{ child[labelKey] }}</span>
				</el-menu-item>
			</template>
		</el-submenu>
	</div>
</template>

<script>
export default {
	name: "SideBarItem",
	props: {
		item: {
			type: Object,
			required: true
		},
		indexKey: {
			type: String,
			default: "path"
		},
		labelKey: {
			type: String,
			default: "name"
		},
		childKey: {
			type: String,
			default: "children"
		}
	}
}
</script>

<style scoped>

</style>
